<div class="contacts-map">
    <div id="map"></div>

    <div class="map-contacts-holder">
        <div class="map-contacts-holder-a">
            <div class="map-contacts map-popup-a">

                <div class="map-contacts-a">
                    <a href="#" class="map-contacts-close"></a>

                    <div class="map-contacts-lbl">Contact Us</div>
                    <div class="map-contact-slide">
                        <div class="map-contact-slide-a">
                            <div class="map-contacts-txt">
                                Email: admin@graphicland.com<br/>
                                Phone: +84 777 55-32-21<br/>
                                Fax: +84 777 55-32-22<br/>
                                19th Floor, Bitexco Office Building, HCMC
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

</div>
</div>

<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&amp;sensor=false"></script>

<script type="text/javascript">
    // When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);

    function init() {
        if ($('body').is('.resize-c')) {
            var mylat = '10.771799';
            var mylong = '106.705584';
        } else {
            var mylat = '10.771799';
            var mylong = '106.705584';
        }

        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: 19,
            disableDefaultUI: true,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.LEFT_CENTER
            },

            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(mylat, mylong), // New York

            // How you would like to style the map.
            // This is where you would paste any style found on Snazzy Maps.
            styles: [
                {
                    featureType: "landscape",
                    stylers: [
                        {saturation: -400},
                        {
                            lightness: 25},
                        {
                            visibility: "on"}
                    ]
                },
                {featureType: "poi", stylers: [
                    {saturation: -100},
                    {lightness: 51},
                    {visibility: "simplified"}
                ]},
                {featureType: "road.highway", stylers: [
                    {saturation: -100},
                    {visibility: "simplified"}
                ]},
                {featureType: "road.arterial", stylers: [
                    {saturation: -100},
                    {lightness: 30},
                    {visibility: "on"}
                ]},
                {featureType: "road.local", stylers: [
                    {saturation: -100},
                    {lightness: 40},
                    {visibility: "on"}
                ]},
                {featureType: "transit", stylers: [
                    {saturation: -100},
                    {visibility: "simplified"}
                ]},
                {featureType: "administrative.province", stylers: [
                    {visibility: "off"}
                ]/**/},
                {featureType: "administrative.locality", stylers: [
                    {visibility: "off"}
                ]},
                {featureType: "administrative.neighborhood", stylers: [
                    {visibility: "on"}
                ]/**/},
                {featureType: "water", elementType: "labels", stylers: [
                    {visibility: "on"},
                    {lightness: -25},
                    {saturation: -100}
                ]},
                {featureType: "water", elementType: "geometry", stylers: [
                    {hue: "#ffff00"},
                    {lightness: -25},
                    {saturation: -97}
                ]}
            ]
        };

        // Get the HTML DOM element that will contain your map
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('map');

        // Create the Google Map using out element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);
        google.maps.event.addDomListener(window, 'resize', init);


        google.maps.event.addListenerOnce(map, 'idle', function () {

            setTimeout(function () {
                var place = new google.maps.LatLng(10.771799, 106.705584);


                var image = new google.maps.MarkerImage('/public/home/img/map-icon.png',
                    new google.maps.Size(118, 42),
                    new google.maps.Point(0, 0),
                    new google.maps.Point(0, 32));

                var marker = new google.maps.Marker({
                    map: map,
                    icon: image,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: place
                });

                $('.map-contacts').each(function (index) {
                    $(this).delay(141 * index).fadeIn();
                });

            }, 500);

        });
    }

</script>
